<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">
				<el-tab-pane label="系统设置">
					<el-form
						ref="form"
						:model="sys"
						label-width="100px"
						style="margin-top: 20px"
					>
						<el-form-item label="vid">
							<el-input
								type="textarea"
								:autosize="{ minRows: 4 }"
								v-model="sys.vid"
							></el-input>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
			<div class="save-div">
				<el-button type="primary" @click="format">代码</el-button>
			</div>

			<el-input
				type="textarea"
				:autosize="{ minRows: 4 }"
				v-model="result"
			></el-input>
		</el-card>
	</el-main>
</template>

<script>
export default {
	name: "system",
	data() {
		return {
			sys: {
				vid: "",
			},
			result: "",
		};
	},
	mounted() {},
	methods: {
		format() {
			var vid = this.sys.vid;
			this.result =
				"<script " +
				`src='//player.polyv.net/script/polyvplayer.min.js'>` +
				"<//script>" +
				`\r\n <div id='plv_${vid}'></div> \r\n` +
				"<script>" +
				`\r\n var player = polyvObject('#plv_${vid}').videoPlayer \r\n ({ \r\n 'width':'1000', \r\n 'height':'562', \r\n 'vid' : '${vid}' \r\n }); \r\n` +
				"<//script>";
			this.result = this.result.replaceAll("//script", "/script");
		},
	},
};
</script>

<style>
.save-div {
}
</style>
